<!DOCTYPE HTML>
<html>

<head>
	<title>snake</title>
</head>


<body>
	<div>
	</div>
	<div style="margin:auto 0">
		<canvas id="game" width="500px" height="500px"></canvas>
	</div>
	<div id="output">xxxx</div>

	<script type="text/javascript">

		
	
		function drawRect(x,y,w,h)
		{
			content.fillStyle='#FF0000';
			content.fillRect(x,y,w,h);
		}
		function drawCell(x,y)
		{
			drawRect(x,y,10,10);
		}

		function clear()
		{
			content.fillStyle='#cccccc';
			content.fillRect(0,0,cwidth,cheight);
		}

		function keyDown(event) 
		{
			if(event.keyCode == 37)
			{
				if(dir != 3)dir = 1;
			}
			else if(event.keyCode == 38)
			{
				if(dir != 4)dir = 2;
			}
			else if(event.keyCode == 39)
			{
				if(dir != 1)dir = 3;
			}
			else if(event.keyCode == 40)
			{
				if(dir != 2)dir = 4;
			}
		} 
		function keyUp(event) 
		{ 
			//dir = 0;
		} 
		   
		function moveSnake()
		{
			checkGameOver();


			var sx = snakexs.pop();
			var sy = snakeys.pop();
			sx = snakexs[0];
			sy = snakeys[0];
			if(dir == 1)
			{
				sx = snakexs[0] - 1;
			}
			else if(dir == 2)
			{
				sy = snakeys[0] - 1;
			}
			else if(dir == 3)
			{
				sx = snakexs[0] + 1;
			}
			else if(dir == 4)
			{
				sy = snakeys[0] + 1;
			}
			snakexs.unshift(sx);
			snakeys.unshift(sy);
			//////////////////////

			if(snakexs[0] == rx && snakeys[0] == ry)
			{
				eat();
			}

			//trace(snakexs.join(',')+'=='+snakeys.join(','));
		}

		function checkGameOver()
		{
			if(snakexs[0] < 0  || snakexs[0]*10 > cwidth-10 || snakeys[0] < 0 || snakeys[0]*10 > cheight-10)
			{
				gameOver();
				return;
			}

			var rows = cwidth/10;
			var first = snakexs[0] + rows*snakeys[0];

			var len = snakexs.length;
			for(var i=1;i<len;i++)
			{
				//只有第一个和其他重叠了才gameover
				if(snakexs[i] + rows*snakeys[i]  == first)
				{
					gameOver();
					return;
				}
			}

		}

		function gameOver()
		{
			clearInterval(runID);
			alert('game over');
		}

		function eat()
		{
			trace('eat');
			rx = -1;
			ry = -1;
			snakexs.push(snakexs[snakexs.length-1]);
			snakeys.push(snakeys[snakeys.length-1]);
		}

		//能到死循环就nb了
		function randomOne()
		{
			rx = parseInt(Math.random()*cwidth/10);
			ry = parseInt(Math.random()*cheight/10);
			/*
			var rows = cwidth/10;
			var rxy = snakexs[0] + rows*snakeys[0];

			var len = snakexs.length;
			for(var i=0;i<len;i++)
			{
				if(snakexs[i] + rows*snakeys[i]  == rxy)
				{
					return randomOne();
				}
			}
			*/
		}

		function drawSnake()
		{
			var len = snakexs.length;
			for(var i=0;i<len;i++)
			{
				drawCell(snakexs[i]*10,snakeys[i]*10);
			}
		}

		function drawRandom()
		{
			if(rx >=0)
			{
				drawCell(rx*10,ry*10);
			}
		}

		

		function run()
		{
			clear();

			drawSnake();
			drawRandom();

			if(cp >= sp)
			{
				cp = 0;
				moveSnake();
			}
			cp++;

			//
			var a = Math.random();
			if(a>0.98 && rx == -1)
			{
				randomOne();
			}
		}

		

		function trace(text)
		{
			output.innerText += '\n'+text;
		}
		
		var canvas=document.getElementById('game');

		var output = document.getElementById('output');
		output.innerText = '';
		

		var content=canvas.getContext('2d');

		var cwidth = canvas.width;
		var cheight = canvas.height;
	
		var mx = 10;
		var my = 10;
		var dir = 3;
		var sp = 5;
		var cp = 0;

		var rx = -1;
		var ry = -1;

		var snakexs = [3,2,1];
		var snakeys = [0,0,0];

		document.onkeydown = keyDown;
		document.onkeyup = keyUp;

		var runID = setInterval("run()",20);
			
		//
		/*clear();
		//
		canvas.onclick = function oc(e)
		{
			trace(e.clientX+"::"+e.clientY);
			touchDir(e.clientX,e.clientY);
			trace(dir);
		}*/
		//-------------------------------------------
		function touchDir(ccx,ccy)
		{
			if(ccx < cwidth/2 && ccy < cheight/2)
			{
				if(ccx/cwidth > ccy/cheight)
				{
					dir = 2;
				}
				else
				{
					dir = 1;
				}
			}
			else if(ccx > cwidth/2 && ccy > cheight/2)
			{
				if(ccx/cwidth > ccy/cheight)
				{
					dir = 3;
				}
				else
				{
					dir = 4;
				}
			}
			else if(ccx > cwidth/2 && ccy < cheight/2)
			{
				if(ccx/cwidth-0.5 + ccy/cheight < 0.5)
				{
					dir = 2;
				}
				else
				{
					dir = 3;
				}
			}
			else
			{
				if(ccx/cwidth + ccy/cheight-0.5 < 0.5)
				{
					dir = 1;
				}
				else
				{
					dir = 4;
				}
			}
		}


		var anObject = 
		{
				  handleEvent: function(e)
				  {
						
					  switch(e.type){
						  case "touchstart":
								var ccx = e.touches[0].clientX;
								var ccy = e.touches[0].clientY;
								touchDir(ccx,ccy);
								trace(ccx+":"+ccy+"->"+dir);
						  break;
						  case "touchsmove":
						  //YOUR CODE HERE
						  break;
						  case "touchend":
						  //YOUR CODE HERE
						  break;
					  }
				  }
		};
		canvas.addEventListener("touchstart",anObject,false);

	</script>

	

</body>

</html>
